<style scoped lang="less">
@keyframes rotate {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
.play{
  transform: rotate(-15deg) !important;
}
.running{
  animation-play-state: running!important;
}
.musicDetail {
  position: relative;
  width: 100%;
  white-space: nowrap;
  height: calc(100% - 105px);
  font-size: 40px;
  box-sizing: border-box;
  padding: 0 70px;
  &__main{
    padding: 20px 0;
    margin: 0 auto;
    max-width: 860px;
    &__play-box{
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      &__control{
        position: relative;
        margin-right: 60px;
        &__cover-box{
          width: 300px;
          padding: 60px 0;
          box-sizing: border-box;
          position: relative;
          height: 300px;
          margin: 30px auto 0;
          animation: rotate 10s infinite linear forwards paused;
          &__bg{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: 1;
            width: 100%;
          }
          &__cover{
            border-radius: 50%;
            position: absolute;
            width: 80%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
          }
        }
        &__bar{
          top: -10px;
          left: 0;
          transition: all ease-in-out .3s;
          transform-origin: left top;
          transform: rotate(-35deg);
          z-index: 2;
          position: absolute;
          width: 150px;
        }

        &-box{
          width: 300px;
          height: 100px;
        }
      }

      &__music-info{
        flex: 1;
        height: 100%;

        &__title{
          max-width: 400px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 24px;
          color: #141B27;
          font-weight: 500;
        }

        &__sub-title-box{
          margin-top: 8px;
          font-size: 12px;
          display: flex;
          flex-flow: row nowrap;
          &__item{
            display: flex;
            flex-flow: row nowrap;
            margin-right: 8px;

            &__label{
              font-weight: 400;
              color: #848484;
            }
            &__value{
              max-width: 80px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              color: rgba(127, 127, 182, 0.96);
              transition: all ease-in-out .3s;
              margin-right: 4px;
              &:hover{
                cursor: pointer;
                color: red;
              }
            }
          }
        }
      }
    }

    &__bottom{
      margin-top: 20px;
      box-sizing: border-box;
      display: flex;
      flex-flow: row nowrap;
    }
  }
}
</style>
<template>
  <div class="musicDetail" ref="element">
    <div class="musicDetail__main">
      <div class="musicDetail__main__play-box">
        <!--     控制区域   -->
        <div class="musicDetail__main__play-box__control">
          <img :src="Bar" class="musicDetail__main__play-box__control__bar" :class="{'play': musicInfo.isPlay}">
          <div class="musicDetail__main__play-box__control__cover-box" :class="{'running': musicInfo.isPlay}">
            <img :src="Record" class="musicDetail__main__play-box__control__cover-box__bg">
            <img :src="musicInfo.cover" class="musicDetail__main__play-box__control__cover-box__cover">
          </div>
          <canvas class="musicDetail__main__play-box__control-box" ref="analogy"/>
        </div>
        <!--    歌词信息 歌曲信息    -->
        <div class="musicDetail__main__play-box__music-info">
          <div class="musicDetail__main__play-box__music-info__title">{{musicInfo.title}}</div>
          <div class="musicDetail__main__play-box__music-info__sub-title-box">
            <div class="musicDetail__main__play-box__music-info__sub-title-box__item">
              <div class="musicDetail__main__play-box__music-info__sub-title-box__item__label">专辑：</div>
              <div @click="handleClickAlbum(ele)" class="musicDetail__main__play-box__music-info__sub-title-box__item__value">{{musicInfo.album.name}}</div>
            </div>
            <div class="musicDetail__main__play-box__music-info__sub-title-box__item">
              <div class="musicDetail__main__play-box__music-info__sub-title-box__item__label">歌手：</div>
              <div @click="handleClickSinger(ele)" class="musicDetail__main__play-box__music-info__sub-title-box__item__value" v-for="(ele,index) of musicInfo.singer">{{ ele.name }}</div>
            </div>
          </div>
          <!--      歌词    -->
          <LyricBox />
        </div>
      </div>
      <div class="musicDetail__main__bottom">
        <!--   评论   -->
        <CommentsBox :el="element"/>
        <!--   相似歌曲   -->
        <RelativeMusicBox />
      </div>
    </div>
  </div>
  <!--  滚动条  -->
  <scroll-bar :el="element" />
</template>

<script lang="ts" setup>
// 资源
import ScrollBar  from "@/components/scrollBar/index";
import LyricBox from "./lyricBox.vue"
import CommentsBox from './commentsBox.vue'
import RelativeMusicBox from './relativeMusicBox.vue'
//@ts-ignore
import Bar from '../../icon/bar.png'
//@ts-ignore
import Record from '../../icon/record.png'
import netEasyMusicStore from '../../store'
import {computed, ref, watch} from "vue";
import {drawAnalogyDataVModelA} from "@/core";
const element = ref(null)
const analogy = ref(null)
// 数据
const musicInfo = computed(() => ({
  id: netEasyMusicStore.$state.playing?.id, // 当前id
  album:  netEasyMusicStore.$state.playing?.al ?? { name:'未知', id:null }, // 专辑💽
  singer: netEasyMusicStore.$state.playing?.ar?.map((ele:any) => ele) ?? [{name:'未知',id:null}],
  cover: netEasyMusicStore.$state.playing?.cover, // 封面
  isPlay: netEasyMusicStore.$state.playing?.isPlay ?? false, // 播放中
  title: netEasyMusicStore.$state.playing?.title ?? '未知'
}))

const analogyData = computed(() => netEasyMusicStore.$state.analogyData)
watch(analogyData,(value:ArrayBuffer) => drawAnalogyDataVModelA(analogy.value,value))
// 交互
/** 点击专辑 */
const handleClickAlbum = (event:any) => {
  console.log(event)
}
/** 点击歌手 */
const handleClickSinger = (event:any) => {
  console.log(event)
}

</script>

